import React from 'react';
import { observer } from 'mobx-react-lite';
import countStore from '../store/count';
import appStore from '../store/app';

export default observer(() => {
    console.log('re-render ChildCount');

    return (
        <main className='container p-4 border'>
            <div className='p-4'>count is: {countStore.count}</div>
            <button
                className='p-2 border'
                type='button'
                onClick={async () => {
                    appStore.setLoading(true);
                    await countStore.addCount();
                    appStore.setLoading(false);
                }}
            >
                AddCount
            </button>
        </main>
    );
});
